<template>
  <div class="container bg-gray">
    <div class="emptyarea" v-if="loaded && !dataList.length">
      <img src="../../assets/imgs/other/car@2x.png" alt="" class="car">
      <div class="txt">
        暂未车辆信息~
      </div>
    </div>
    <div v-else>
      <div class="car-items">
        <div class="car-item" v-for="car in dataList" :key="car.id">
          <div class="car-item-header border-b">
            <div class="flex">
              <xd-img class="brand-cover" :src="car.logo"></xd-img>
              <div class="brand-info">
                <div class="brand-title">
                  {{car.carBrandName}}-{{car.carSerialName}}
                </div>
                <div class="brand-plate">
                  {{car.plateNumber}}
                </div>
              </div>
            </div>
          </div>
          <div class="car-item-footer">
            <div class="flex">
              <div class="flex" @click="setAsDefault(car.id)">
                 
                <img src="../../assets/imgs/other/chceked@2x.png" v-if="car.default" class="checked-icon" alt="">
                <img src="../../assets/imgs/other/noselected@2x.png" v-else class="checked-icon" alt="">
                <div>
                  设为默认
                </div>

              </div>
              <div class="flex flex-con edit-area-wrap">
                <div class="edit-area">
                  <span @click="eidtCar(car.id)">
                    <img src="../../assets/imgs/other/edit@2x.png" alt="" class="edit-icon"> 编辑
                  </span>
                  
                </div>
                <div class="del-area" @click="delCar(car.id)">
                  <img class="del-icon" src="../../assets/imgs/other/del@2x.png" alt=""> 删除
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="btn-areas">
      <router-link class="btn-submit" tag="div" to="/addcar">添加车辆信息</router-link>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [],
      loaded: false
    };
  },
  created() {
    this.showLoading();
    this.$get("/api/user/getCarList")
      .then(data => {
        this.dataList = data;
        this.loaded = true;
        this.hideLoading();
      })
      .catch(_ => {
        this.hideLoading();
      });
  },
  methods: {
    eidtCar(id) {
      this.$router.push("/addcar?id=" + id);
    },
    delCar(id) {
      this.$messagebox
        .confirm("确实删除该车吗")
        .then(_ => {
          this.showLoading();
          this.$post("/api/user/removeCar", { id })
            .then(_ => {
              this.hideLoading();
              this.dataList.forEach((el, index) => {
                if (el.id == id) {
                  this.dataList.splice(index, 1);
                }
              });
            })
            .catch(_ => {
              this.hideLoading();
            });
        })
        .catch(_ => {});
    },
    setAsDefault(id) {
      this.$post("/api/user/setDefaultCar", { id });
      this.dataList.forEach(el => {
        if (el.id == id) {
          el.default = true;
        } else {
          el.default = false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.emptyarea {
  color: #333333;
  font-size: 0.4rem;
  text-align: center;
  padding-top: 2.0933rem;
  .txt {
    padding-top: 0.8rem;
  }
}

.car {
  width: 3.5067rem;
  height: 2.3333rem;
}

.btn-areas {
  padding-top: 0.8rem;
  text-align: center;
  .btn-submit {
    display: inline-block;
    width: 8.4667rem;
    height: 1.0667rem;
    line-height: 1.0667rem;
    color: white;
    font-size: 0.4267rem;
    background-image: url("../../assets/imgs/other/btn.png");
    background-size: 100% 100%;
    background-position: left top;
  }
}

.car-item {
  font-size: 0.3467rem;
  background-color: #fff;
  color: #999999;
  margin-bottom: 0.32rem;
}

.car-item-header {
  padding: 0.5867rem 0.32rem 0.6667rem 0.32rem;
}
.checked-icon {
  width: 0.5467rem;
  height: 0.5467rem;
  margin-right: 0.2667rem;
}
.car-item-footer {
  padding: 0.3333rem 0.4rem;
}
.brand-info {
  padding-left: 0.3467rem;
}
.brand-cover {
  width: 1.4rem;
  height: 1.4rem;
}
.edit-icon {
  width: 0.4533rem;
  height: 0.4933rem;
  margin-right: 0.2667rem;
}
.del-icon {
  width: 0.4533rem;
  height: 0.4933rem;
  margin-right: 0.2667rem;
}
.brand-title {
  font-size: 0.4rem;
  color: #333;
  padding-bottom: 0.36rem;
}
.edit-area {
  margin-right: 0.9467rem;
}
.edit-area-wrap {
  justify-content: flex-end;
}
</style>
